<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <div class="header">
          <el-button size="small" @click="handelDelAll" type="danger">删除选中</el-button>
          <div>
            <el-input placeholder="搜索文章" style="width:230px" v-model="article" clearable>
            </el-input>
            <el-input placeholder="搜索用户ip" style="width:230px;margin: 0 20px" v-model="cip" clearable>
            </el-input>
            <el-button size="small" type="primary" @click="searchHandle">搜索</el-button>
          </div>
        </div>
      </template>

    </vxe-toolbar>

    <vxe-table ref="xTable" border show-overflow :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="cip" title="IP" width="120">
      </vxe-column>
      <vxe-column field="articleTitle" title="文章标题">
      </vxe-column>
      <vxe-column field="comment" title="内容">
      </vxe-column>
      <vxe-column field="uip" title="被回复的IP" width="120">
      </vxe-column>
      <vxe-column field="createTime" title="创建时间" width="140">
      </vxe-column>
      <vxe-column title="删除" width="55">

        <template #default="{ row }">
          <vxe-button type="text" @click="removeRowEvent(row)" icon="vxe-icon-delete"></vxe-button>
        </template>
      </vxe-column>
      <!--自定义空数据模板-->
      <template #empty>
        <span style="color: red;">
          <p>没有更多数据了！</p>
        </span>
      </template>
    </vxe-table>
    <div class="block">
      <el-pagination layout="prev, pager, next" @current-change="handleChange" :page-size="10" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data () {
    return {
      total: 0,
      page: '1',
      article: '',
      cip: '',
      tableData: [
      ]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 搜索
    searchHandle () {
      this.getList()
    },
    // 删除全选的
    async handelDelAll () {
      if (!this.$refs.xTable.getCheckboxRecords().length) return this.$message.error('不能一个都不选')
      await this.$axios.post('/comment/delAll', {
        ids: this.$refs.xTable.getCheckboxRecords().map(item => item._id)
      })
      this.getList()
    },
    // 分页
    handleChange (page) {
      this.page = page
      this.getList()
    },
    // 删除单个
    async removeRowEvent (row) {
      await this.$axios.delete(`/comment/${row._id}`)
      this.getList(this.page)
    },
    // 渲染数据
    getList () {
      this.$axios.get(`/comment/all?page=${this.page}&limit=10&articleTitle=${this.article}&cip=${this.cip}`).then(res => {
        this.total = res.data.data.count
        this.tableData = res.data.data.data.map(item => ({ ...item, createTime: dayjs(item.createTime - 0).format('YYYY-MM-DD HH:mm') }))
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-width: 700px;
}
.el-button.el-button--danger.el-button--small {
  padding: 0 7px;
  height: 30px;
}
.block {
  margin-top: 40px;
  text-align: right;
}
</style>
